<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 
	<%String path = request.getContextPath(); %> 
<!DOCTYPE html >
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<link rel="shortcut icon" href="favicon.ico">
     
	<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    
    <link href="../plugins/summernote/summernote.css" rel="stylesheet">
    <link href="../plugins/summernote/summernote-bs3.css" rel="stylesheet">
	

    <script type="text/javascript">
    
    </script>
</head>
<body class="gray-bg" >
    <div class="wrapper wrapper-content animated fadeInUp" >
        <div class="row">
        	<div class="col-sm-3">
        		<div class="ibox">
        			<div class="ibox-title">
	        			<h5>分类</h5>
                    </div>
	        		<div class="ibox-content">
	        			<button class="btn btn-primary btn-block" id="blog-type" >新建分类</button>
	        			<div class="hr-line-dashed"></div>
	                    <ul class="folder-list" id="blog_type_list" style="padding: 0">
	                    
	                    
	                    		<%-- <c:forEach items="${typelist }" var="obj" >
	                                <li>
	                                	<a onclick="findBlogByTypeNo(${obj.type_no})"><i class="fa fa-folder"></i> ${obj.type_name } <span class="label label-warning pull-right">${obj.num }</span></a>
	                                </li>
	                    		</c:forEach> --%>
                         </ul>
                 	</div>
        		</div>
        	</div>
            <div class="col-sm-9">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>所有项目</h5>
                        <div class="ibox-tools">
                        	<!-- data-toggle="modal" data-target="#myModal5" -->
                            <a  class="btn btn-primary btn-xs" onclick="open_from_editor();"  >撰写博文</a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="col-md-1">
                                <button type="button" id="loading-example-btn" class="btn btn-white btn-sm"><i class="fa fa-refresh"></i> 刷新</button>
                            </div>
                            <div class="col-md-11">
                                <div class="input-group">
                                    <input type="text" placeholder="请输入博文名称" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
                                </div>
                            </div>
                        </div>
                        <div class="project-list">

                            <table class="table table-hover table-striped">
                                <thead style="text-align: center">
                                    <tr>
                                        <th></th>
                                        <th>标题</th>
                                        <th>分类</th>
                                        <th>作者</th>
                                        <th>更新日期</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="blog_list">
                                    
                                </tbody>
                            </table>
	                            <div class="btn-group" id="page_btn" >
	                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog"  aria-hidden="true" >
             <div class="modal-dialog modal-sm" style="width:80%;height;auto">
                 <div class="modal-content">
                     <div class="modal-header" style="padding:15px 15px">
                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                         <h4 class="modal-title">撰写博文</h4>
                         <!-- <small class="font-bold">这里可以显示副标题。</small> -->
                     </div>
                     <div class="modal-body gray-bg" style="padding:0px">
                     	<div class="ibox-content gray-bg" style="padding:0px" > 
					  			<jsp:include page="bac_blog_push.jsp"></jsp:include>
							 <form class="form-horizontal m-t" id="pushBlogForm" >
<%-- 					  			<jsp:include page="form_editors.jsp"></jsp:include> --%>
					  		</form>                      
						</div>
                     </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" onclick="saveModelContent();">保存</button>
		            </div>
                 </div>
             </div>
         </div>
         
         <div class="modal inmodal fade" id="myModal-blog-type" tabindex="-1" role="dialog"  aria-hidden="true" >
             <div class="modal-dialog modal-sm" style="width:40%;height;auto">
                 <div class="modal-content">
                     <div class="modal-header" style="padding:15px 15px">
                         <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                         <h4 class="modal-title">新建分类</h4>
                         <!-- <small class="font-bold">这里可以显示副标题。</small> -->
                     </div>
                     <div class="modal-body gray-bg" style="padding:0px">
                     	<div class="ibox-content gray-bg" style="padding:0px" > 
                     	
					  		<div class="ibox-content">
	                        	<div class="row">
	                            	<div class="col-sm-12">
		                                <form role="form">
		                                    <div class="form-group">
		                                        <label>类名：</label>
		                                        <input type="text" placeholder="请输入分类名" class="form-control">
		                                    </div>
		                                </form>
                            		</div>
                       			</div>
                    		</div>        
						</div>
                     </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" onclick="saveModelContent();">保存</button>
		            </div>
                 </div>
             </div>
         </div>
	</div>
    
	<!-- 全局js -->
    <script src="../rec/js/jquery-1.8.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
	<script src="js/async-ajax.js"></script>
    <script src="js/ajax-fileupload.js"></script>

    <!-- 自定义js -->
    <script src="js/content.js"></script>
    <script src="js/blog-list.js"></script>

	<!-- SUMMERNOTE -->
    <script src="../plugins/summernote/summernote.min.js"></script>
    <script src="../plugins/summernote/summernote-zh-CN.js"></script>

    <script>
    
        $(document).ready(function () {

            $('.summernote').summernote({
                lang: 'zh-CN',
                height:200
            });
            $('#loading-example-btn').click(function () {
                btn = $(this);
                simpleLoad(btn, true)
                simpleLoad(btn, false)
            });

            // load blog type
            
            // sync:   false- 同步,  true-异步
            
            
            $("#blog-type").click(function(){
            	openBlogTypeModel();
            });
            
       		getBlogTypeCount();
            getBlogContentPageInint("1" , "");
        });
        

        function simpleLoad(btn, state) {
            if (state) {
                btn.children().addClass('fa-spin');
                btn.contents().last().replaceWith(" Loading");
            } else {
                setTimeout(function () {
                    btn.children().removeClass('fa-spin');
                    btn.contents().last().replaceWith(" Refresh");
                }, 2000);
            }
        }
        var edit = function () {
            $("#eg").addClass("no-padding");
            $('.click2edit').summernote({
                lang: 'zh-CN',
                focus: true
            });
        };
        var save = function () {
            $("#eg").removeClass("no-padding");
            var aHTML = $('.click2edit').code(); //save HTML If you need(aHTML: array).
            $('.click2edit').destroy();
        };
        function getBlogTypeCount(){
        	
        	var result = doPost("getBlogTypeCount", null);
			var typeHtml = "";
        	var obj =  result.detail;
        	if(obj!=null && obj!=""){
        		var bolgTypeList = obj.typelist;
        		$.each(bolgTypeList, function(i, obj) {
        			typeHtml += "<li><a onclick='findBlogByTypeNo("+obj.type_no+")'><i class='fa fa-folder'></i> "+obj.type_name+"<span class='label label-warning pull-right'>"+obj.num+"</span></a></li>";
        		});
	        	$("#blog_type_list").empty();
	        	$("#blog_type_list").append(typeHtml);
        	}
        } 
        
        function getBlogContentPageInint(pageNum,typeNo) {
        	var typeNo = typeNo;
			var parJson = "{pageNum:'"+pageNum+"',typeNo:'"+typeNo+"'}";
			var result = doPost("getBlogContentPageInint", parJson);
			var obj = result.detail;
			var blogHtml = "";
			var pageHtml = "";
			if(obj!=null && obj!=""){
        		var pagelist = obj.bloglist;
        		
        		pageHtml += "<button type='button' class='btn btn-white'><i class='fa fa-chevron-left'></i></button>";
        		for(var i = 1; i<= pagelist.totalPage; i++){
        			pageHtml += "<button id='btn_"+i+"' onclick='getBlogPageInint("+i+" , "+(typeNo==null||typeNo==""?"":typeNo)+");' class='btn btn-primary "+(i==pageNum ? "btn-primary": 'btn-white')+"'>"+i+"</button>";
        		}
        		pageHtml += "<button type='button' class='btn btn-white'><i class='fa fa-chevron-right'></i></button>";
        		$("#page_btn").empty();
	        	$("#page_btn").append(pageHtml);
        		var bloglist = pagelist.list;
        		if(bloglist!=null && bloglist!=""){
            		
            		$.each(bloglist, function(i, entity) {
            			blogHtml += "<tr id="+entity.serial_id+"  >";
            			blogHtml += 	"<td>";
            			blogHtml += 		"<div class='icheckbox_square-green' style='position:relative'>";
            			blogHtml += 			"<input type='checkbox' class='i-checks' name='input[]' style='position:absolute;opacity:0'>";
            			blogHtml += 			"<ins class='iCheck-helper' style='position:absolute;top:0;left:0;display:block;width:100%;height:100%;margin:0;padding:0;background:#fff;border:0;opacity:0'></ins>";
           				blogHtml += 		"</div>";
           				blogHtml += 	"</td>";
           				blogHtml += 	"<td>"+entity.blog_title+"</td>";
           				blogHtml += 	"<td>"+entity.type_name+"</td>";
           				blogHtml += 	"<td>"+entity.user_name+"</td>";
           				blogHtml += 	"<td>"+entity.update_time+"</td>";
           				blogHtml += 	"<td><a class='btn btn-white btn-sm'><i class='fa fa-folder'></i> 查看</a> <a class='btn btn-white btn-sm' onclick='open_from_editor("+entity.serial_id+")'><i class='fa fa-pencil'></i> 编辑</a></td>";
           				blogHtml += "</tr>";
            		});
    	        	$("#blog_list").empty();
    	        	$("#blog_list").append(blogHtml);
            	}
        	}
	    }
        function getBlogPageInint(pageNum,typeNo) {
        	if(typeNo=="undefined" || typeNo==undefined){
        		typeNo = "";
        	}
        	$("button[class='btn btn-primary btn-primary']").attr("class", "btn btn-primary btn-white");
        	$("#btn_"+pageNum).attr("class","btn btn-primary btn-primary");
        	
			var parJson = "{pageNum:'"+pageNum+"',typeNo:'"+typeNo+"'}";
        	console.log("parJson:"+parJson);
			var result = doPost("getBlogContentPageInint", parJson);
        	console.log(result);
			var obj = result.detail;
			var blogHtml = "";
			if(obj!=null && obj!=""){
        		var pagelist = obj.bloglist;
        		var bloglist = pagelist.list;
        		if(bloglist!=null && bloglist!=""){
            		
            		$.each(bloglist, function(i, entity) {
            			blogHtml += "<tr id="+entity.serial_id+">";
            			blogHtml += 	"<td>";
            			blogHtml += 		"<div class='icheckbox_square-green' style='position:relative'>";
            			blogHtml += 			"<input type='checkbox' class='i-checks' name='input[]' style='position:absolute;opacity:0'>";
            			blogHtml += 			"<ins class='iCheck-helper' style='position:absolute;top:0;left:0;display:block;width:100%;height:100%;margin:0;padding:0;background:#fff;border:0;opacity:0'></ins>";
           				blogHtml += 		"</div>";
           				blogHtml += 	"</td>";
           				blogHtml += 	"<td>"+entity.blog_title+"</td>";
           				blogHtml += 	"<td>"+entity.type_name+"</td>";
           				blogHtml += 	"<td>"+entity.user_name+"</td>";
           				blogHtml += 	"<td>"+entity.update_time+"</td>";
           				blogHtml += 	"<td><a class='btn btn-white btn-sm'><i class='fa fa-folder'></i> 查看</a> <a class='btn btn-white btn-sm' onclick='open_from_editor("+entity.serial_id+")'><i class='fa fa-pencil'></i> 编辑</a></td>";
           				blogHtml += "</tr>";
            		});
    	        	$("#blog_list").empty();
    	        	$("#blog_list").append(blogHtml);
            	}
        	}
	    }
         function open_from_editor( id ) {
    		if(id!=null && id!=""){
    			
    			// getBlogContent?serialId=20170922636611
    			var reqStr = "{serialId:'"+id+"'}";
    			var result = doPost("getBlogContent", reqStr);
    			
    			console.log(result.detail);
    			var obj = result.detail;
    			if(obj!=null && obj!=""){
        			$("#blogTitle").val(obj.blog_title);
        			$("#blogContent").val(obj.blog_content);
        			$('#b_content').summernote('code',obj.blog_content);
        			$('#serialId').val(obj.serial_id);
        			if(obj.req_url!=null && obj.req_url!="" && obj.req_url!="null" ){
        				$("#blog_img").attr("src","../../"+obj.req_url);
        			} 
			         $('#myModal5').modal('show');
			         $("#model_hide").attr("style" , "display:none");
    			}
    			
    		}
	    }
	    
	    
    
    	function findBlogByTypeNo(typeNo){
            getBlogContentPageInint("1" , typeNo);
    	}
    	
    	
    	
    	function saveModelContent(){
    		
    		var formValue = getFormValue("pushBlogForm" , "b_content");
    		var reqStr = JSON.stringify(formValue);
			console.log("--->"+reqStr);
			
			var result = doPost("saveAndUpdateBlogContent",reqStr);
			if(result.detail.finish=="OK"){
				//alert(formValue.serialId);
				var fval = $("#fileToUpload").val();
				if(fval != null &&  fval != ""){
					updateFileUpload(formValue.serialId);
				}
			}
			
    	}
    	
    	function updateFileUpload(serialId){
        	$.ajaxFileUpload({  
                url:'fileUpload',  
                secureuri:false,  
                fileElementId:'fileToUpload',//file标签的id  
                dataType: 'json',//返回数据的类型  
                data:{'serialId':serialId},//一同上传的数据  
                async: false,
                success: function (data, status) {  
                	$('#myModal5').modal('hide');
                	$("#fileToUpload").val("");
		    		getBlogContentPageInint("1" , "");
                     
                },  
                error: function (data, status, e) {  
                    alert(e);  
                }  
            });  
        }
    </script>
    </body>
</html>